<template>
  <a-modal
    title="填写箱号、封号"
    width="750px"
    centered
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    destoryOnClose
  >
    <p>
      <img src="../../../static/images/tshi.png" style="float:left; margin-right:5px;" />一行填写一个箱子的箱号、封号，填写后在拆分的订单中，自动使用该填写的箱号、封号
    </p>
    <a-table
      :columns="columns"
      :data-source="dataInit"
      :pagination="false"
      :maskClosable="false"
      size="middle"
      :row-key="(record,index) => index"
    >
      <template
        v-for="col in ['containerNo', 'containerSealNo', 'holderId']"
        :slot="col"
        slot-scope="text, record"
      >
        <div v-if="col === 'holderId'" :key="col">
          <a-select
            :v-model="text"
            @change="e => handleChange(e, record.orderId, col)"
            style="width:180px"
          >
            <a-select-option v-for="v in holderNameList" :key="v.id">{{v.name}}</a-select-option>
          </a-select>
        </div>
        <div v-else :key="col">
          <a-input :value="text" @change="e => handleChange(e.target.value, record.orderId, col)" />
        </div>
      </template>
    </a-table>
  </a-modal>
</template>

<script>
import { queryHolderNameList } from '@/api'
import { queryIsExistContainerNo } from '@/api/orderCenter'
const createArray = size => {
  const arr = []
  for (let i = 0; i < size; i++) {
    arr.push({})
  }
  return [...arr]
}

export default {
  name: 'box-title-no',
  props: {
    visible: Boolean,
    data: {
      type: Array,
      default () {
        return []
      }
    },
    size: Number
  },
  data () {
    const columns = [
      {
        title: '序号',
        width: '60px',
        dataIndex: 'orderId'
      },
      {
        title: '箱号',
        dataIndex: 'containerNo',
        scopedSlots: { customRender: 'containerNo' }
      },
      {
        title: '封号',
        dataIndex: 'containerSealNo',
        scopedSlots: { customRender: 'containerSealNo' }
      },
      {
        title: '持箱人',
        dataIndex: 'holderId',
        scopedSlots: { customRender: 'holderId' }
      }
    ]
    return {
      columns,
      dataInit: [],
      holderNameList: []
    }
  },
  methods: {
    holderNameListRequest (e) {
      queryHolderNameList(e)
        .then(res => {
          this.holderNameList = res.data
          // // console.log(res.data)
        })
        .catch(rs => {})
    },
    isExistContainerNoRequest (e, dataSource) {
      queryIsExistContainerNo(e)
        .then(res => {
          // console.log(res)
          if (res.code === 0) {
            if (res.data.isExist) {
              this.$message.error(`箱号${res.data.list.join(',')}已存在！`)
              return false
            }
            this.$emit('setVisible', dataSource)
          }
        })
        .catch(rs => {})
    },
    handleChange (value, orderId, column) {
      // // console.log(value)
      const newData = [...this.dataInit]
      const target = newData.filter(item => orderId === item.orderId)[0]
      if (target) {
        target[column] = value
        this.dataInit = newData
      }
    },
    handleOk () {
      let _self = this
      let dataSource = _self.dataInit
      let nameList = []
      for (let i = 0; i < dataSource.length; i++) {
        if (
          !dataSource[i].containerNo ||
          !dataSource[i].containerSealNo ||
          !dataSource[i].holderId
        ) {
          _self.$message.error('信息填写不完整！')
          return false
        } else {
          nameList.push(dataSource[i].containerNo)
        }
      }
      if (new Set(nameList).size !== nameList.length) {
        _self.$message.error('箱号填写相同！')
        return false
      }
      this.isExistContainerNoRequest({ nameList: nameList }, dataSource)
    },
    handleCancel () {
      this.dataInit = []
      this.$emit('setVisible', false)
    }
  },
  watch: {
    visible () {
      if (this.visible) {
        if (this.size >= 0) {
          let newData = [...this.data]
          let len = newData.length
          if (this.size > len) {
            newData = newData.concat(createArray(this.size - len))
          } else {
            newData = newData.filter((v, i) => i < this.size)
          }
          this.dataInit = newData.map((v, i) => {
            return {
              orderId: i + 1,
              holderId: v.holderId || '',
              containerNo: v.containerNo || '',
              containerSealNo: v.containerSealNo || ''
            }
          })
        }
      }
    }
  },
  mounted () {
    this.holderNameListRequest({ status: 1 })
  }
}
</script>

<style lang="less" scoped>
</style>
